<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07个人简历练习</title>
</head>
<body>

<table border="1px">
    <caption>个人简历</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>

<script>
    persion = {
        name: "肖旭睿",
        age: 23,
        pic: "img/xiaoxurui.png",
        friends: ["小明", "小红", "小花"]
    };
    let nameTd = document.getElementById("name_td");
    let ageTd = document.getElementById("age_td");
    nameTd.innerHTML = persion.name;
    ageTd.innerHTML = persion.age;

    //插入照片
    let pic = document.createElement("img");
    pic.src = persion.pic;
    pic.width = 100;
    let picTd = document.getElementById("pic_td");
    picTd.append(pic);
    //好友
    let ulE = document.createElement("ul");
    for (let i = 0; i < persion.friends.length; i++) {
        let liE = document.createElement('li');
        liE.innerHTML = persion.friends[i];
        ulE.append(liE);
    }
    document.getElementById("friends_td").append(ulE);
</script>
</body>
</html>